<!--  -->
<template>
  <!--文件操作组件（上传，批量下载，批量移动） -->
  <div class="list-nv">
    <headerMenuCom
      style="margin: 10px 0"
      @create-folder="createFolder"
      @batch-download="batchDownload"
      @upload-file="uploadFile"
      @batch-delete-file="batchDeleteFile"
      @batch-move-file="batchMoveFile"
    />
    <!-- <el-button @click="download">download</el-button> -->
    <el-input
      v-model="search"
      style="width: 30%; height: 25px"
      placeholder="请输入你要查找的文件名"
      @input="searchFiles"
      v-if="$route.meta.title === '所有'"
    />
  </div>
  <!-- 面包屑 -->
  <el-breadcrumb separator=">" v-if="$route.meta.title !== '日历'">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: $route.path }">
      {{ $route.meta.title }}
    </el-breadcrumb-item>
    <el-button
      @click="goUpFoloder()"
      link
      v-if="useFilePidStore().filePid !== useUserStore().UserInfo.filePid"
      >返回上一级</el-button
    >
  </el-breadcrumb>
  <!-- //表格 -->
  <el-table
    class="multipleTable"
    ref="multipleTableRef"
    :data="porop.tableData"
    height="78vh"
    @selection-change="handleSelectionChange"
  >
    <!-- 多选框 -->
    <el-table-column type="selection" width="40" />
    <!-- 视图 -->
    <el-table-column property="fileCover" width="40">
      <template #default="scope">
        <div class="demo-image__preview">
          <!-- //文件类型1:视频2:音频3:图片4:pdf 5:doc 6:excel 7:txt 8:code 9:zip 10:其他 -->
          <!-- 目录 -->

          <svg class="icon" v-if="scope.row.folderType === 1">
            <use xlink:href="#icon-wenjianjia"></use>
          </svg>

          <!--1:视频 如果是视频 -->
          <el-image
            title="点击播放视频"
            v-else-if="scope.row.fileType === 1"
            class="hover-style"
            style="width: 30px"
            :src="scope.row.fileCover"
            @click="openViedo(scope.row)"
          />
          <!--   2:音频-->
          <el-tooltip
            content="点击播放音频"
            placement="top"
            v-else-if="scope.row.fileType === 2"
          >
            <!-- @click="openViedo(scope.row)" -->
            <svg class="icon hover-style" @click="openViedo(scope.row)">
              <use xlink:href="#icon-yinle"></use>
            </svg>
          </el-tooltip>
          <!-- 3:图片 如果图片 -->
          <el-image
            class="hover-style"
            v-else-if="scope.row.fileType === 3"
            title="点击预览图片"
            style="width: 30px"
            preview-teleported
            :src="scope.row.fileCover"
            :preview-src-list="
              scope.row.folderType == 0 ? [scope.row.fileCover] : null
            "
          />
          <!-- 4:pdf  -->
          <svg v-else-if="scope.row.fileType === 4" class="icon">
            <use xlink:href="#icon-pdf1"></use>
          </svg>
          <!-- 5:doc -->
          <svg v-else-if="scope.row.fileType === 5" class="icon">
            <use xlink:href="#icon-word1"></use>
          </svg>
          <!-- 6:excel  -->
          <svg v-else-if="scope.row.fileType === 6" class="icon">
            <use xlink:href="#icon-excel1"></use>
          </svg>
          <!-- 7:txt-->
          <svg v-else-if="scope.row.fileType === 7" class="icon">
            <use xlink:href="#icon-file_txt"></use>
          </svg>
          <!--  8:code   -->
          <svg v-else-if="scope.row.fileType === 8" class="icon">
            <use xlink:href="#icon-code"></use>
          </svg>
          <!-- 9:zip  -->
          <svg v-else-if="scope.row.fileType === 9" class="icon">
            <use xlink:href="#icon-yasuobao"></use>
          </svg>

          <!--10:其他 -->
          <svg class="icon" v-else>
            <use xlink:href="#icon-weizhi3"></use>
          </svg>
        </div>
      </template>
    </el-table-column>
    <!-- 文件名 -->
    <el-table-column property="fileName" label="文件名" width="100">
      <template #default="scope">
        <!--    style="display: flex; align-items: center" -->
        <div
          v-if="$route.meta.title !== '回收站'"
          @click="scope.row.folderType == 1 ? handleEnterFolder(scope.row) : ''"
        >
          <span
            class="textName"
            :class="scope.row.folderType == 1 ? 'fileNameC' : ''"
            :title="scope.row.fileName"
            style="margin-left: 10px"
          >
            {{ scope.row.fileName }}
          </span>
        </div>
        <div v-else style="margin-left: 10px">
          {{ scope.row.fileName }}
        </div>
      </template>
    </el-table-column>
    <!-- 增删查改 -->
    <el-table-column
      v-if="route.meta.title !== '已分享文件' && $route.meta.title !== '回收站'"
    >
      <template #default="scope">
        <div class="adDeSeUp">
          <!-- <span style="margin-left: 10px">{{ scope.row.phone }}</span>
                <span>MB</span> -->
          <div @click="shareFiled(scope.row.fileId)">
            <el-icon>
              <Share />
            </el-icon>
            <span>分享</span>
          </div>
          <div @click="downloadFilled(scope.row.fileId)">
            <el-icon>
              <Download />
            </el-icon>
            <span>下载</span>
          </div>
          <div @click="deleteFilled(scope.row.fileId)">
            <el-icon>
              <DeleteFilled />
            </el-icon>
            <span>删除</span>
          </div>

          <div @click="repeatName(scope.row)">
            <el-icon>
              <Edit />
            </el-icon>
            <span>重命名</span>
          </div>
          <div @click="moveFiled(scope.row.fileId)" v-if="false">
            <el-icon>
              <Rank />
            </el-icon>
            <span>移动</span>
          </div>
        </div>
      </template>
    </el-table-column>
    <!--日期  -->
    <el-table-column label="日期" width="">
      <template #default="scope">
        {{ scope.row.createTime }}
      </template>
    </el-table-column>
    <!--  文件大小-->
    <el-table-column property="fileSize" label="文件大小">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span
            class="textName"
            :title="scope.row.fileSize"
            style="margin-left: 10px"
          >
            {{
              scope.row.fileSize < 1024
                ? Math.floor(scope.row.fileSize) + 'KB' === '0KB'
                  ? '未知'
                  : Math.floor(scope.row.fileSize) + 'KB'
                : Math.floor(scope.row.fileSize / 1025) + 'MB'
            }}
          </span>
        </div>
      </template>
    </el-table-column>
    <!-- //类型 -->
    <el-table-column property="fileType" label="文件类型">
      <template #default="scope">
        <!-- 1:视频2:音频3:图片4:pdf 5:doc 6:excel 7:txt 8:code 9:zip 10:其他 -->
        <span v-if="scope.row.folderType === 1">文件夹</span>
        <span v-else-if="scope.row.fileType === 1">视频</span>
        <span v-else-if="scope.row.fileType === 2">音频</span>
        <span v-else-if="scope.row.fileType === 3">图片</span>
        <span v-else-if="scope.row.fileType === 4">pdf</span>
        <span v-else-if="scope.row.fileType === 5">文档</span>
        <span v-else-if="scope.row.fileType === 6">表格</span>
        <span v-else-if="scope.row.fileType === 7">文本</span>
        <span v-else-if="scope.row.fileType === 8">代码文件</span>
        <span v-else-if="scope.row.fileType === 9">压缩文件</span>
        <span v-else>未知</span>
      </template>
    </el-table-column>
    <el-table-column v-if="route.meta.title == '已分享文件'" label="取消按钮">
      <template #default="scope">
        <el-button
          size="large"
          type="danger"
          @click="handleCancelShare(scope.row)"
          >取消分享</el-button
        >
      </template>
    </el-table-column>
    <el-table-column v-if="$route.meta.title === '回收站'" label="取消删除">
      <template #default="scope">
        <el-button
          size="large"
          type="danger"
          @click="handleCancelDelete(scope.row)"
          >取消删除</el-button
        >
      </template>
    </el-table-column>
    <el-table-column v-if="$route.meta.title === '回收站'" label="永久删除">
      <template #default="scope">
        <el-button
          size="large"
          type="danger"
          @click="handleForOverDelete(scope.row)"
          >永久删除</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="浏览次数" v-if="route.meta.title == '已分享文件'">
      <template #default="scope">
        <span>{{ scope.row.showCount }}</span>
      </template>
    </el-table-column>
  </el-table>

  <!-- 移动框 -->
  <el-dialog v-model="moveFiledDialogVisible" title="移动到此处">
    <el-table ref="multipleTableRef" :data="tableDataFolder" height="40vh">
      <el-table-column property="fileName" label="全部文件">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <div class="demo-image__preview">
              <el-image
                style="width: 30px"
                preview-teleported
                :src="scope.row.fileCover"
                :preview-src-list="[scope.row.fileCover]"
              />
            </div>
            <span
              class="textName"
              :class="scope.row.folderType == 1 ? 'fileNameC' : ''"
              :title="scope.row.fileName"
              style="margin-left: 10px"
            >
              {{ scope.row.fileName }}
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="moveFiledDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="moveFile()"> 移动到此处 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- //分享 -->
  <el-dialog v-model="shareVisible" width="40%" style="border-radius: 10px">
    <template #header>
      <div class="textAndIcon">
        <el-icon><Share /></el-icon>
        <span>分享文件</span>
      </div>
    </template>
    <div>有效时间：</div>
    <el-radio-group v-model="validTime" style="margin: 20px">
      <el-radio v-for="item in ValidDate" :label="item.validId" :key="item">{{
        item.validDay === -1 ? '永久有效' : item.validDay + '天'
      }}</el-radio>
      <!-- <el-radio :label="1">7 天</el-radio>
      <el-radio :label="2">30 天</el-radio>
      <el-radio :label="3">永久有效</el-radio> -->
    </el-radio-group>
    <div>提取码:</div>
    <el-radio-group v-model="shareCodeType" style="margin: 20px">
      <el-radio :label="0">随机生成提取码</el-radio>
      <el-radio :label="1">
        手动输入提取码：
        <el-input v-model="shareCode" style="margin: 20px; width: 40%" />
      </el-radio>
    </el-radio-group>
    <span style="color: red">仅可输入4位字母和数字</span>
    <div class="dialog-footer" style="display: flex; justify-content: center">
      <el-button
        style="width: 30%; height: 40px"
        type="primary"
        round
        @click="shareFiledClick"
      >
        <span>创建链接</span>
      </el-button>
    </div>
    <template #footer>
      <div style="font-size: 10px; display: flex; justify-content: center">
        配合净网行动，严厉打击色情低俗等不良信息的传播行为，如发现，将封禁账号。
      </div>
    </template>
  </el-dialog>
  <!-- 上传 -->
  <el-drawer v-model="drawer" show-close size="50%">
    <template #header>
      <h3>上传模块</h3>
    </template>
    <template #default>
      <Simple-Upload></Simple-Upload>
    </template>
  </el-drawer>
  <!-- 视频播放器 -->
  <el-dialog v-model="drawerVideoShow" show-close size="50%" @close="close">
    <VideoSimple :videoUrl="videoUrl" :showDo="showDo"></VideoSimple>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import headerMenuCom from './HeaderMenuCom.vue'
import SimpleUpload from './Simple-Upload.vue'
import VideoSimple from './VideoSimple.vue'
import { enterFolder, gotoUpFoloder, selectFileType } from '@/request/common'
import { debounce } from '@/util/debounce.js'
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus'
import { newFolderService, selectFile } from '@/request/common'
import {
  useDataStore,
  useUserStore,
  useFilePidStore,
  UseVedioUrlStore
} from '@/stores/index'
import { useRoute } from 'vue-router'
import { cancelShare } from '@/request/webShare'
import { getRecycleFileList, reductionByFileId } from '@/request/download'
import {
  deleteFileByFileId,
  batchDeleteFileByFileIds,
  renameByFileId
} from '@/request/download'
import {
  getUserShares,
  getAllValidInfo,
  singleShareService
} from '@/request/webShare'
import { getUserInfo } from '@/request/usr'
getUserInfo(useUserStore().UserInfo.userId).then((res) => {
  useUserStore().setUserInfo(res)
})
const route = useRoute()
const drawerVideoShow = ref(false)
const videoUrl = ref()
const openViedo = (url) => {
  drawerVideoShow.value = true
  showDo.value = true
  UseVedioUrlStore().setVedioUrl(
    'http://s2rbh2xvc.hd-bkt.clouddn.com/' + url.userId + '/' + url.fileName
  )
  // videoUrl.value =
  //   'http://s2rbh2xvc.hd-bkt.clouddn.com/' + url.userId + '/' + url.fileName
  // console.log(videoUrl.value)
}
const showDo = ref(true)
const close = () => {
  showDo.value = false
}
const porop = defineProps({
  tableData: {
    type: Array
  }
})

//只显示文件夹--------------------------------
const tableDataFolder = ref()

//复选框获取选中文件的信息-----------------
// const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

//单文件下载-------------------------------
const downloadFilled = (fileId) => {
  //创建a标签将地址赋值给a标签的href属性，实现下载
  const a = document.createElement('a')
  a.href = `/prod-api/down/downLoadFileByFileId?fileId=${fileId}`
  a.click()
  // downloadFileByFileId(fileId).then((res) => {
  //   console.log(res)
  // })
}
//单文件删除-------------------------------------
const deleteFilled = (fileId) => {
  ElMessageBox.confirm('你确定要删除这个文件吗?', '🗑️删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      //发删除请求
      deleteFileByFileId(fileId).then(async () => {
        if (route.meta.title === '所有') {
          enterFolder(useFilePidStore().filePid).then((res) => {
            console.log(res)
            useDataStore().setData(res.data)
          })
        } else if (route.meta.title === '图片') {
          const res = await selectFileType(useUserStore().UserInfo.userId, 3)
          useDataStore().setimageTableData(res.data || '')
        } else if (route.meta.title === '视频') {
          const res = await selectFileType(useUserStore().UserInfo.userId, 1)
          useDataStore().setvideoTableData(res.data || '')
        } else if (route.meta.title === '音频') {
          const res = await selectFileType(useUserStore().UserInfo.userId, 2)
          useDataStore().setaudioTableData(res.data || '')
        } else if (route.meta.title === '文档') {
          const res = await selectFileType(useUserStore().UserInfo.userId, 4)
          useDataStore().settextTableData(res.data || '')
        } else if (route.meta.title === '其他') {
          const res = await selectFileType(useUserStore().UserInfo.userId, 5)
          useDataStore().setotherTableData(res.data || '')
        }
      })

      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {})
}
//单文件移动-------------------------------
// const removeCom = ref(null)
const moveFiledDialogVisible = ref(false)
const singlefileId = ref()
const moveFiled = (id) => {
  console.log(id)
  moveFiledDialogVisible.value = true
  singlefileId.value = id
}
//重命名-------------------------------
const repeatName = (row) => {
  ElMessageBox.prompt('请输入新的文件名', '🔁重命名', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\S/,
    inputErrorMessage: '文件名不能为空'
  })
    .then(({ value }) => {
      //发修改文件名请求
      let endName = row.fileName.split('.')
      if (endName[0] === value) {
        ElMessage.error('新名称不能相同')
        return
      }
      endName = endName.length > 1 ? '.' + endName[endName.length - 1] : ''
      renameByFileId(row.fileId, value + endName).then((res) => {
        console.log(res)
        endName = ''
        ElMessage({
          type: 'success',
          message: `修改成功：${value}`
        })
        enterFolder(useFilePidStore().filePid).then((res) => {
          console.log(res)
          useDataStore().setData(res.data)
        })
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功'
      })
    })
}
//单文件分享---------------------------------
const shareVisible = ref(false) //弹窗显示
const shareCodeType = ref(0) //分享码类型  0：随机生成，1：手动输入
const shareCode = ref() //手动输入分享码
const validTime = ref('1') //分享时长 0:1天，1：2天，2：30天，3：永久
const shareFileId = ref() //要分享文件id
const ValidDate = ref()
//点击获取要分享文件id
const shareFiled = (id) => {
  shareFileId.value = id
  shareVisible.value = true
  getAllValidInfo().then((res) => {
    console.log(res)
    ValidDate.value = res
  })
}
const shareFiledClick = async () => {
  //判断是否符合长度且是手动输入
  if (shareCodeType.value === 1 && Object(shareCode.value).length !== 4) {
    ElMessage({
      type: 'error',
      message: '分享码只能4位'
    })
    return
  }

  // 随机产生的4位提取码

  let randomCode = Math.floor(Math.random() * 10000)
  //发请求并且获取分享地址码
  //改名
  // const fileId = shareFileId.value
  // const validId = validTime.value
  // const userId = useUserStore().UserInfo.userId
  // const code = shareCodeType.value === 0 ? randomCode : shareCode
  const res = await singleShareService(
    shareFileId.value,
    validTime.value,
    useUserStore().UserInfo.userId,
    shareCodeType.value === 0 ? randomCode : shareCode
  )
  shareVisible.value = false
  //显示分享地址和提取码

  ElNotification({
    title: '分享文件提取信息',
    message:
      '分享地址' +
      `http://localhost:8080/sharePublicFile/${res.data.shareId}` +
      '提取码：' +
      `${shareCodeType.value === 0 ? randomCode : shareCode}`,
    duration: 0,
    type: 'success'
  })
  // ElMessageBox({
  //   title: '分享信息',
  //   message: h('span', null, [
  //     h('span', null, ''),
  //     h('a', { style: 'color: blue' }),
  //     h('span', ``)
  //   ])
  // })
}
//创建文件夹---------------------------
const createFolder = () => {
  console.log('被点击了createFolder')
  ElMessageBox.prompt('请输入文件夹名称', '📁新文件夹', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\S/,
    inputErrorMessage: '文件名不能为空'
  })
    .then(({ value }) => {
      //发修改创建文件夹请求
      newFolderService(
        // localStorage.getItem('userId'),
        useUserStore().getUserInfo().userId,
        useFilePidStore().filePid,
        value
      ).then(() => {
        enterFolder(useFilePidStore().filePid).then((res) => {
          useDataStore().setData(res.data)
        })
      })
      ElMessage({
        type: 'success',
        message: `创建成功:${value}`
      })
    })
    .catch(() => {})
}
//批量下载-----------------------------
const batchDownload = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要下载的文件'
    })
    return
  }

  console.log(multipleSelection.value)
  //发下载请求
  console.log('被点击了batchDownload')
}
//上传--------------------------------
const drawer = ref(false)
const uploadFile = () => {
  console.log('被点击了uploadFile')
  drawer.value = true
}
//批量删除------------------------------
const batchDeleteFile = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的文件'
    })
    return
  }
  const name = multipleSelection.value.map((item) => item.fileName)
  const fileIds = multipleSelection.value.map((item) => item.fileId)
  // console.log(multipleSelection.value)
  // console.log(name)
  console.log('被点击了batchDeleteFile')
  ElMessageBox.confirm(`确定要删除这些文件吗:[${name}]`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      batchDeleteFileByFileIds(fileIds).then(() => {
        enterFolder(useFilePidStore().filePid).then((res) => {
          console.log(res)
          useDataStore().setData(res.data)
        })
      })

      //发批量删除请求!!!!!!!!!
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {})
}
//批量移动文件------------------------------
const batchMoveFile = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要移动的文件'
    })
    return
  }
  moveFiledDialogVisible.value = true
  console.log(multipleSelection.value)
  console.log('被点击了batchMoveFile')
}
//移动到此处
const moveFile = (row) => {
  console.log(singlefileId.value)
  console.log(row)
}
//进入文件夹
const handleEnterFolder = (row) => {
  // const routerPath = route.params.word + row + '-'
  // router.push({
  //   path: `/allview/${routerPath}`
  // })
  //将row添加路由路径上
  localStorage.setItem('filePid', row.fileId)
  useFilePidStore().setFilePid(row.fileId)
  enterFolder(row.fileId).then((res) => {
    useDataStore().setData(res.data)
  })
  // //切割路径字段字段
  // const folderName = route.params.word.split('%') + row
  // console.log(folderName)
}

const goUpFoloder = () => {
  // if (route.path === '/allview') {
  gotoUpFoloder(useFilePidStore().filePid).then((res) => {
    console.log(res)
  })
  // } else if (route.path === '/sharedFiles') {
  //   if (useFilePidStore().filePid !== useUserStore().UserInfo.filePid) {
  //     getUserShares(useUserStore().UserInfo.userId).then((res) => {
  //       useDataStore().setData(res.data)
  //     })
  //   }
  // }
}

//搜索数据
const search = ref()
//搜索防抖
//查询文件发请求
const searchFiles = debounce(() => {
  if (search.value === '') {
    enterFolder(useFilePidStore().filePid).then((res) => {
      useDataStore().setData(res.data)
    })
  } else {
    selectFile(useUserStore().UserInfo.userId, search.value).then((res) => {
      // @ts-ignore
      useDataStore().setData(res === '' ? '' : res.data)
    })
  }
}, 1000)
const handleCancelShare = async (row) => {
  const shareId = row.shareId
  await cancelShare(shareId)
  getUserShares(useUserStore().UserInfo.userId).then((res) => {
    useDataStore().setData(res.data)
  })
}

const handleCancelDelete = (row) => {
  reductionByFileId(row.fileId).then((res) => {
    console.log(res)
    getRecycleFileList(useUserStore().UserInfo.userId).then((res) => {
      console.log(res)
      useDataStore().setData(res.data || [])
    })
  })
}
//永久删除
const handleForOverDelete = (row) => {
  deleteFileByFileId(row.fileId).then((res) => {
    console.log(res)
    getRecycleFileList(useUserStore().UserInfo.userId).then((res) => {
      console.log(res)
      useDataStore().setData(res.data || [])
    })
  })
}
</script>

<style lang="scss" scoped>
.list-nv {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.textName {
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 溢出内容隐藏 */
  text-overflow: ellipsis;
  /* 使用省略号代替溢出的文本 */
}

.fileNameC:hover {
  cursor: pointer;
  color: rgb(135, 205, 235);
  // text-decoration: underline;
  font-weight: bolder;
}

.adDeSeUp {
  font-size: small;
  opacity: 0;
  display: flex;
  flex-wrap: wrap;
}

.adDeSeUp:hover {
  opacity: 1;
}
.adDeSeUp div span:active {
  text-shadow: 0 0 30px rgb(243, 7, 7);
}
.adDeSeUp div span:hover {
  font-weight: bolder;
}
.adDeSeUp div {
  cursor: pointer;
  margin: 0 5px;
  // font-weight: bold;
  color: rgb(75, 168, 248);
}
.hover-style {
  position: relative;
  cursor: pointer;
  //图片有动画效果
  transition: all 0.3s;
}
.hover-style:hover {
  //图片放大效果
  transform: scale(1.3);
}
@media screen and (max-width: 1100px) {
  /* 在屏幕宽度小于或等于600px时应用的样式 */
  .adDeSeUp span {
    display: none;
  }
  .adDeSeUp {
    opacity: 1;
  }
  .adDeSeUp div {
    .el-icon {
      transition: all 0.3s;
    }
  }
  .adDeSeUp div:hover {
    border-radius: 100%;
    .el-icon {
      font-size: 20px;
    }
  }
}
</style>
